<template>
  <div class="p-5">
    <div class="card-box">
      <SearchView @query="querybtn" @reset="resetbtn" />
    </div>

    <div class="card-box box mt-5">
      <a-button type="primary" @click="openbtn(null)">
        <template #icon> <PlusOutlined /> </template>新增分类
      </a-button>
      <a-table
        :columns="columns"
        :data-source="data?.items"
        :pagination="false"
        :loading="loading"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" primary @click="editbtn(record)"
              >编辑</a-button
            >
            <a-button type="link" danger>删除</a-button>
          </template>
        </template>
      </a-table>
      <PageView />
    </div>
    <addView
      v-model:value="newdata.open"
      :type="newdata.type"
      :editdata="newdata.editinfo"
    />
  </div>
</template>
<script setup lang="ts">
import { reactive, onMounted } from 'vue';

import { PlusOutlined } from '@ant-design/icons-vue';
import * as api from '#/api/core/konwledeg.ts';

import addView from './addView.vue';
import SearchView from './searchView.vue';

import PageView from '/components/PageView/index.vue';
import { useRequest, createUseRequestComponent } from 'vue-hooks-plus';
// 定义接口类型
interface NewData {
  type: 'add' | 'update'; // 限制 type 只能是 'add' 或 'edit'
  editinfo: any; // 根据实际情况替换 any 为具体类型，比如 YourEditInfoType
  open: boolean;
  current: number;
  pagesize: number;
  query: any;
}

const newdata: NewData = reactive({
  open: false,
  type: 'add',
  editinfo: {},
  current: 1,
  pagesize: 20,
  query: {},
});

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    align: 'center',
    key: 'name',
  },
  {
    title: '描述',
    dataIndex: 'desc',
    align: 'center',
    key: 'desc',
  },

  {
    title: '创建时间',
    dataIndex: 'createdTime',
    align: 'center',
    key: 'createdTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
  },
];
const datas = [
  {
    id: 1,
    name: '营养知识',
    desc: '描述',
  },
  {
    id: 2,
    name: '健康生活',
    desc: '描述',
  },
];

const openbtn = (e: any) => {
  newdata.type = 'add';
  newdata.editinfo = e;
  newdata.open = true;
};

const editbtn = (e: any) => {
  newdata.type = 'update';
  newdata.editinfo = e;
  newdata.open = true;
};

const querybtn = (e: any) => {
  console.log('e', e);
  newdata.query = e;
  run();
};

const resetbtn = (e: any) => {
  newdata.query = e;
  run();
};

const { data, loading, error, run } = useRequest(
  () =>
    api.$getlist({
      pagesize: newdata.pagesize,
      current: newdata.current,
      ...newdata.query,
    }),
  {
    manual: true, //手动触发
    onSuccess: (result) => {
      console.log('data.value：', data.value);
    },
  },
);

run();
</script>
<style scoped lang="less">
.box {
  min-height: 100px;
  // box-sizing: border-box;
  // padding: 20px;
}
</style>
